<template>

	<view style="margin-top: 50px;" v-if="Lists.length===0">
		<fui-empty
			src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png"
			title="暂无优惠券">
			<fui-button text="返回上一页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
				:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goSettle"></fui-button>
		</fui-empty>

	</view>
	<view class="coupon-container" v-for="(list, index) in Lists" v-else>
		<view class="coupon-left">
			<view class="coupon-info">
				<view class="coupon-header">
					<view class="coupon-tag">惠</view>
					<view class="coupon-discount">{{numberQuan[index]}}</view>
				</view>
				<view class="coupon-date"><text style="margin-right: 10px;">有效期:</text>{{list.couponsTime}}</view>
			</view>
		</view>
		<view class="coupon-right">
			<view class="coupon-price">{{numberQuan[index]}}</view>
			<view class="coupon-button" @click="goOrder">去使用</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		url
	} from '@/utils/request'

	const Lists = ref([])
	const numberDiscount = ref('2')
	const getOpenId = ref('')
	let numberQuan = ref([])
	onMounted(() => {
		uni.getStorage({
			key: 'openId',
			success(res) {
				getOpenId.value = res.data
				console.log("你好" + getOpenId.value)
				console.log(res.data)

				wx.request({
					url: url + '/photo/userSelectCoupons',
					method: 'GET',
					data: {
						openId: getOpenId.value
					},
					success: (Res) => {
						console.log(Res.data.data)
						Lists.value = Res.data.data
						if (Res.data && Res.data.data) {
							let allNumber = []
							Res.data.data.forEach(order => {
								let numArrays = order.couponsType;
								console.log("com", order.couponsType)
								allNumber.push(numArrays)
							});
							numberQuan.value = allNumber
							console.log(numberQuan)
						} else {
							console.log(Res.data);
							console.log("No data found for userSelectMyOKOrder");
						}
						console.log(Lists.value)
					}
				})
			},
			fail(err) {
				console.error('Failed to get storage:', err)
			}
		})
	})


	const goSettle = () => {
		uni.navigateBack();
	}

	const goOrder = () => {
		uni.switchTab({
			url: '../order/order'
		})

	}
</script>

<style scoped>
	.coupon-container {
		display: flex;
		justify-content: space-between;
		border: 1px solid #e5e5e5;
		border-radius: 5px;
		background-color: #fff;

		max-width: 500px;
		margin: 10px;
	}

	.coupon-left {
		display: flex;
		align-items: center;
		padding: 10px;
		flex-grow: 1;
	}

	.coupon-header {
		display: flex;
		align-items: center;
	}

	.coupon-tag {
		background-color: #e54b3c;
		color: #fff;
		padding: 2px 5px;
		border-radius: 3px;
		margin-right: 12px;
		font-size: 14px;
	}

	.coupon-info {
		display: flex;
		flex-direction: column;
	}

	.coupon-discount {
		font-size: 16px;
		font-weight: bold;
	}

	.coupon-date {
		color: #666;
		font-size: 14px;
		margin-top: 20px;
	}

	.coupon-right {
		display: flex;
		flex-direction: column;
		justify-content: center;


		align-items: center;
		background-color: #e54b3c;
		color: #fff;
		padding: 10px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		min-width: 100px;
	}

	.coupon-price {
		font-size: 20px;
		font-weight: bold;
	}

	.coupon-condition {
		font-size: 14px;
		margin-top: 5px;
		color: #fff;
		text-align: center;
	}

	.coupon-button {
		background-color: #fff;
		color: #e54b3c;
		padding: 5px 15px;
		border-radius: 3px;
		cursor: pointer;
		text-align: center;
		font-size: 14px;
		margin-top: 10px;
	}
</style>